<template>
  <div class="basic-form edit-card">
    <h2>基本信息</h2>

    <el-form :model="formData" label-position="left" label-width="70px">
      <!-- 第一行：姓名和头像 -->
      <div class="form-row">
        <el-form-item label="姓名" class="form-item">
          <el-input v-model="formData.name" placeholder="请输入您的姓名" />
        </el-form-item>

        <el-form-item label="" class="form-item" label-width="0px">
          <el-upload class="avatar-uploader" action="#" :show-file-list="false" :on-change="handleAvatarChange"
            :auto-upload="false">
            <img v-if="formData.avatar" :src="formData.avatar" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon">
              <Plus />
            </el-icon>
          </el-upload>
          <div class="avatar-actions ml-4 flex flex-col gap-2" v-if="formData.avatar">
            <el-button size="small" @click="handleCropAvatar">裁剪</el-button>
            <el-button size="small" type="danger" @click="formData.avatar = ''" class="!ml-0">删除</el-button>
          </div>
        </el-form-item>
      </div>

      <!-- 第二行：职位和工作地点 -->
      <div class="form-row">
        <el-form-item label="职位" class="form-item">
          <el-input v-model="formData.jobTitle" placeholder="请输入您的职位" />
        </el-form-item>

        <el-form-item label="工作地点" class="form-item">
          <el-input v-model="formData.location" placeholder="请输入工作地点" />
        </el-form-item>
      </div>

      <!-- 第三行：手机和邮箱 -->
      <div class="form-row">
        <el-form-item label="手机号码" class="form-item">
          <el-input v-model="formData.phone" placeholder="请输入手机号码" />
        </el-form-item>

        <el-form-item label="电子邮件" class="form-item">
          <el-input v-model="formData.email" placeholder="请输入邮箱地址" />
        </el-form-item>
      </div>

      <!-- 第四行：出生日期 -->
      <div class="form-row">
        <el-form-item label="出生日期" class="form-item">
          <el-date-picker class="flex-1 shrink-0" v-model="formData.birthday" type="date" placeholder="选择日期"
            value-format="YYYY-MM-DD" />
        </el-form-item>
        <el-form-item class="flex-1 shrink-0"></el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script setup>
import { Plus } from '@element-plus/icons-vue'

const props = defineProps({
  formData: {
    type: Object,
    required: true,
    default: () => ({
      name: '',
      jobTitle: '',
      phone: '',
      email: '',
      birthday: '',
      location: '',
      avatar: ''
    })
  }
})

const emit = defineEmits(['update:formData'])

const handleAvatarChange = (file) => {
  const reader = new FileReader()
  reader.onload = (e) => {
    emit('update:formData', {
      ...props.formData,
      avatar: e.target.result
    })
  }
  reader.readAsDataURL(file.raw)
}

const handleCropAvatar = () => {
  // 这里可以调用图片裁剪组件
  console.log('调用图片裁剪功能')
}
</script>

<style lang="scss" scoped>
.basic-form {
  .form-row {
    @apply flex gap-4;

    .form-item {
      @apply flex-1 items-center;
    }
  }

  .avatar-uploader {
    @apply border border-dashed border-gray-300 rounded-md w-16 h-16 flex items-center justify-center cursor-pointer overflow-hidden;

    .avatar {
      @apply w-full h-full object-cover;
    }

    .avatar-uploader-icon {
      @apply text-gray-400 text-2xl;
    }
  }

}
</style>